<template>
	<view>
		<view class="task-steps">
			<uni-steps :options="taskState==0?stepsList1:stepsList2" direction="column" :active="stepsIndex"></uni-steps>
		</view>
		<view class="task-item" @click="goDemand()">
			<view class="task-item-left">
				<label class="task-item-label">查看任务</label>
				<label class="task-item-text">点击查看该技能任务需求详情页</label>
			</view>
			<label class="user-item-arrow"></label>
		</view>
		<view class="evaluate-main" v-if="taskState>0">
		<view class="evaluate-title">评价</view>
		<view class="evaluate-empty" v-if="evaluateList.length==0">
			<image class="evaluate-empty-bg" src="../../static/images/img_evaluate_empty_bg@3x.png"></image>
			<label class="evaluate-empty-label">啊哦~ 还没有评价记录</label>
		</view>
		<scroll-view v-else class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
			<view v-for="(item,index) in evaluateList" :key="index">
				<EvaluateItem :options="item" @click="goDetail(item)"></EvaluateItem>
			</view>
			<view class="loading-more">
				<text class="loading-more-text">我是有底线的哦~</text>
			</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '../../components/uni-steps.vue'
	import EvaluateItem from '../../components/evaluate-item.vue'
	export default {
		components: {
			uniSteps,
			EvaluateItem
		},
		data() {
			return {
				taskState:1, //0 报名失败 1报名成功
				stepsIndex: 0,
				progress: {},
				evaluateList:[],
				stepsList1: [{
					title: "已报名",
					desc: "请耐心等待报名结果，通过后将自动进入下一阶段"
				}, {
					title: "已结束",
					desc: "抱歉，您与企业的需求暂不适合~"
				}, ],
				stepsList2: [{
						title: "已报名",
						desc: "请耐心等待报名结果，通过后将自动进入下一阶段"
					},
					{
						title: "进行中",
						desc: "请与服务方沟通需求细节，便于更加顺利完成任务"
					},
					{
						title: "待审核",
						desc: "请耐心等待企业确定任务结果信息"
					},
					{
						title: "已完成",
						desc: "恭喜完成本次任务"
					},
				]
			}
		},
		onLoad(e) {
			if (e && e.index)
				this.stepsIndex = e.index
			this.getInfo();
			this.getEvaluateList()
		},
		methods: {
			getInfo() {
				this.progress = {
					userId: 1,
					head: "url",
					userName: "沈燕",
					company: "公司名称某某某有限公司",
					isAuth: true,
					score: 4.5,
				}
			},
			goDemand(id) {
				uni.navigateTo({
					url: "../index/detail?id=" + id
				})
			},
			getEvaluateList(userid) {
				//调接口获取评价列表
				let list = [];
				for (let i = 1; i <= 10; i++) {
					let item = {
						id: i,
						userHead: "url",
						userName: "王何伟",
						auth: true,
						time: "2021-06-15",
						score: 4.5,
						scoreText: "满意",
						content: "交易成功后，我的心情是久久不能平静，自古英雄出少年，卖家年纪轻轻，就有经天纬地之才，定国安邦之智。交易成功后，我的心情是久久不能平静，自古英雄出少年，卖家年纪轻轻，就有经天纬地之才，定国安邦之智。"
					}
					list.push(item);
				}
				this.evaluateList = this.evaluateList.concat(list);
				this.$forceUpdate()
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F4F4F4;
	}

	.task-steps {
		background-color: #FFFFFF;
	}

	.uni-steps {
		padding: 32rpx 18rpx;
		padding-bottom: 0;
		border-bottom: 1rpx solid #DDDDDD;
	}
	.task-item {
		margin-top: 16rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
	}
	
	.task-item-left {
		display: flex;
		flex-flow: column;
		flex: 1;
	}
	
	.task-item-label {
		color: #181818;
		font-size: 30rpx;
		font-weight: 500;
		background: url(../../static/images/icon-demand-show@3x.png) left center no-repeat;
		background-size: 30rpx;
		padding-left: 35rpx;
	}
	
	.task-item-text {
		margin-top: 10rpx;
		color: #7B7B7B;
		font-size: 24rpx;
	
	}
	.user-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}
	.evaluate-main{
		background-color: #FFFFFF;
		
		margin-top: 16rpx;
	}
	.evaluate-title{
		color: #181818;
		height: 86rpx;
		display: flex;
		margin: 0 32rpx;
		align-items: center;
		font-size: 30rpx;
		font-weight: 500;
		background: url(../../static/images/icon_pingjia@3x.png) left center no-repeat;
		background-size: 30rpx;
		padding-left: 35rpx;
		border-bottom: 1rpx solid #DDDDDD;
		
	}
	.evaluate-empty {
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		text-align: center;
		padding-top: 48rpx;
		padding-bottom: 88rpx;
	}
	
	.evaluate-empty-bg {
		width: 228rpx;
		height: 164rpx;
		display: block;
		margin: 0 auto 30rpx auto;
	}
	
	.evaluate-empty-label {
		font-size: 22rpx;
		color: #ACACAC;
	}
	
	.user-content {
		margin: 32rpx auto 0;
		padding: 32rpx;
		padding-bottom: 0;
		border-top: 1px solid #DDDDDD;
	}
	
	.user-content rich-text {
		width: 622rpx;
		font-size: 24rpx;
		color: #7B7B7B;
		line-height: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}
	
	page {
		height: 100%;
	}
	
	.user-card {
		height: 100%;
	}
	
	.scroll-v {
		height: 100%;
		background: rgba(255, 255, 255, 0.87);
		border-radius: 16rpx 16rpx 0px 0px;
	}
	.loading-more{
		margin-top: 50rpx;
	}
</style>
